<template>
	<view class="content">
		<view class="tag_list">
			<view :class="activeTag == 3?'tag selected':'tag'" @click="check(3)">上周</view>
			<view :class="activeTag == 2?'tag selected':'tag'" @click="check(2)">本周</view>
			<view :class="activeTag == 1?'tag selected':'tag'" @click="check(1)">今天</view>
			<view :class="activeTag == 4?'tag selected':'tag'" @click="check(4)">本月</view>
			<view :class="activeTag == 5?'tag selected':'tag'" @click="check(5)">上月</view>
		</view>
		<view class="showData">
			<block v-if="!isHave">
				<view class="tips">
					您目前没有宿舍请点击<span class="here" @click="goCreate()">这里</span>创建宿舍
				</view>
			</block>
		</view>
		<view class="echarts_container" v-if="isShow">
			<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
		</view>
		<view class="noMsg" v-if="!isShow && isHave">
			当前时间，没有记录。
		</view>
	</view>
</template>
<script>
	import timeMachine from "../../tools/timeMachine/index.js";
	import doErro from "../../tools/doErro/index.js";
	import checkALL from "../../tools/checkToken/index.js";
	export default {
		onShow() {
			this.isHave = getApp().globalData.isHave; //load时获取用户是否已经创建了宿舍
			let timeObj = timeMachine.doTime(this.activeTag);
			this.getRoomRes(timeObj, getApp().globalData.uid);
			//console.log(this.getRoomRes(timeObj, getApp().globalData.uid));
		},
		data() {
			return {
				isHave: 0,
				activeTag: 1,
				isShow: true,
				busArr: [{
					"name": "在寝",
					"value": 0
				}, {
					"name": "离寝",
					"value": 0
				}, {
					"name": "请假",
					"value": 0
				}],
				chartData: {},
				averageValue: 0,
				opts: {
					rotate: false,
					rotateLock: true,
					color: ["#91CB74", "#EE6666", "#FAC858", "#73C0DE", "#3CA272"],
					padding: [3, 3, 3, 3],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "在寝率",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 50,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		methods: {
			check(num) {
				this.activeTag = num;
				let timeObj = timeMachine.doTime(num); //时间机器函数
				this.getRoomRes(timeObj, getApp().globalData.uid)
			},
			goCreate() {
				uni.navigateTo({
					url: "/pages/create/create"
				})
			},
			getRoomRes(timeObj, uid) {
				let that = this;
				uniCloud.callFunction({
					name: "rc_roomRes",
					data: {
						timeObj,
						uid
					},
					success(data) {
						//console.log(data.result.data);
						if (data.result.data.length == 0) {
							that.isShow = false;
							return;
						}
						uni.showLoading({
							title: "加载中",
							mask: true
						});
						that.isShow = true;
						that.averageValue = 0;
						that.opts.subtitle.name = "";
						that.busArr = [{
							"name": "在寝",
							"value": 0
						}, {
							"name": "离寝",
							"value": 0
						}, {
							"name": "请假",
							"value": 0
						}];
						data.result.data.forEach((item, key) => {
							if (item.stType == 1) {
								that.busArr[0].value += 1
							} else if (item.stType == 2) {
								that.busArr[1].value += 1
							} else if (item.stType == 3) {
								that.busArr[2].value += 1
							}
						});
						that.averageValue = that.busArr[0].value / data.result.data.length;
						that.averageValue = Math.round(that.averageValue * 100) + '%';
						that.opts.subtitle.name = that.averageValue;
						that.getServerData();
						uni.hideLoading();
					},
					fail(err) {
						//console.log(err);
						doErro.showErro(500);
						uni.hideLoading();
					}
				})
			},
			getServerData() {
				let res = {
					series: [{
						data: this.busArr
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
				//console.log(this.chartData);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.noMsg {
			height: 600rpx;
			line-height: 1200rpx;
			text-align: center;
			font-size: 38rpx;
		}

		.echarts_container {
			margin-top: 200rpx;
			width: 100%;
			height: 600rpx;
		}

		.tag_list {
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 10rpx;
			padding-bottom: 10rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.tag {
				height: 80rpx;
				width: 20%;
				text-align: center;
				line-height: 80rpx;
				color: gray;
				font-size: 32rpx;
			}

			.selected {
				color: #fff;
				background-color: #00aa7f;
				box-shadow: 0rpx 0rpx 5rpx 5rpx #a1d9a0;
				border-radius: 5%;
			}
		}

		.showData {
			border: 0rpx solid red;
			width: 100%;

			.tips {
				height: 600rpx;
				line-height: 1200rpx;
				text-align: center;
				font-size: 38rpx;

				.here {
					color: red;
					text-decoration: underline;
				}
			}
		}
	}
</style>